<template>
  <a-modal
    title="编辑功能元数据"
    :visible="visible"
    :width="800"
    @ok="submitForm"
    @cancel="visible=false"
  >
    <a-form :form="form">
      <a-form-item hidden>
        <a-input v-decorator="['code']"/>
      </a-form-item>
      <a-form-item label="模块标签" v-bind="formItemLayout">
        <a-input v-decorator="field('tag','所属模块',false)"/>
      </a-form-item>
      <a-form-item label="功能名称" v-bind="formItemLayout">
        <a-input v-decorator="field('name','功能名称',true)"/>
      </a-form-item>
      <a-form-item label="排序号" v-bind="formItemLayout">
        <a-input-number v-decorator="field('order','排序号',true,1)" :min="1" :max="999999"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>

  import {field} from '@/utils/util'
  import {updatePage} from '@/api/view'
  import {pick} from 'lodash'

  export default {

    name: 'PageEditModal',

    data() {
      return {
        fields: ['code','name','tag','order'],
        formItemLayout: {
          labelCol: {span: 6},
          wrapperCol: {span: 12}
        },
        row: null,
        index: null,
        form: this.$form.createForm(this),
        ModalText: 'Content of the modal',
        visible: false,
        confirmLoading: false,
      }
    },

    methods: {
      field,

      open(row,index) {
        this.row = row
        this.index = index
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(row, this.fields))
        })
      },
      // 提交
      submitForm() {
        this.form.validateFields((err, values) => {
          if (!err) {
            let data = Object.assign({}, values)
            updatePage(data).then(() => {
              this.$message.success('更新功能元数据成功')
              this.visible = false
              this.row.name = data.name
              this.row.tag = data.tag
              this.row.order = data.order
              this.$emit('success', this.row,this.index)
            })
          }
        })
      }
    }

  }
</script>

<style lang="less" scoped>
</style>
